<template> 
<view class="">

	<scroll-view scroll-y="true" :scroll-into-view="which" scroll-with-animation @scroll="handleScroll"
		class="scrollbody">
		<view id="top" >
		</view>
		<view>
			<navtap style="margin-top: 100upx;"></navtap>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				indicator-active-color="yellow" indicator-color="gray">
				<swiper-item v-for="(item,index) in banner" :key="index" @click="handleBanner(item.link)">
					<!-- <view class="swiper-item"> -->
						<!-- <image src="https://static.mcake.com/new_goods/gejuyuan/B2002/list/1.jpg" mode=""></image> -->
						<image :src="item.img" mode=""></image>
					<!-- </view> -->
				</swiper-item>
				
			</swiper>
			<homeTitle title="本季推荐" entitle="SeasonalRecommend" end="Seasonal"></homeTitle>
			<scroll-view scroll-x="true" scroll-with-animation="true">
				<view class="scrollview">
					<image src="../../static/img/recommend1.jpeg" mode="heightFix"></image>
					<image src="../../static/img/recommend2.jpg" mode="heightFix"></image>
					<image src="../../static/img/recommend3.jpg" mode="heightFix"></image>
				</view>
			</scroll-view>
			<homeTitle title="限时秒杀" entitle="Limited time spike" end="Limited" :countdown="countdown"></homeTitle>
			<view class="flex flex-wrap">
				<goodItem v-for="(item,index) in goodlist" :key="index" :item="item"></goodItem>
			</view>
	
			<view :class="['back-top',isshow?'fadein':'fadeout']"  @click="backtop">
				<text class="iconfont icon-tubiao_fanhuidingbu" ></text>
			</view>
			
			
				
		</view>
		
		
		

	</scroll-view>

	<u-tabbar
		:value="value1"
		@change="name => value1 = name"
		:fixed="true"
		:placeholder="false"
		:safeAreaInsetBottom="false"
		style='margin-top: 100upx;'
	>
		<u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item>
		<u-tabbar-item text="食品" icon="../../static/img2/food.png" @click="gofood" ></u-tabbar-item>
		<u-tabbar-item text="购物车" icon="../../static/img2/shopcar.png" @click="goshopcar" :badge='this.$store.state.cart.cartList.length'></u-tabbar-item>
		<u-tabbar-item text="我的" icon="account" @click="gocenter" ></u-tabbar-item>
	</u-tabbar>
</view>
</template>

<script>
	import homeTitle from '../../componets/homeTitle'
	import goodItem from '../../componets/goodItem'
	import {$http} from '../../util/request.js'
	export default {
		data() {
			return {
				isshow: false,
				which: "",
				show: false,
				banner:[],
				goodlist:[],
				scrollTop:300,
				value1: 0,
				countdown:""
			};
		},
		// onPageScroll(e) {
		// 	console.log(e.scrollTop);
		// 		this.scrollTop = e.scrollTop;
		// 	},
		watch: {
			isshow() {
				if (this.isshow ==false) {
					// console.log(123)
				}
			}
		},
		components: {
			homeTitle,
			goodItem
		},
		methods: {
			handleScroll(ev) {
				// console.log(ev.detail.scrollTop)
				if (ev.detail.scrollTop > 780) {
					this.isshow = true
				} else {
					this.isshow = false
					this.which = ""
				}
			},
			backtop() {
				this.which = "top"

			},
				
			handleBanner(link){
				console.log(link);
				uni.navigateTo({
					url:`./banner?link=${link}`
				})
			},
			click1(e) {
				console.log('click1', e);
			},
			gocenter(){
				uni.navigateTo({
					url:'/pages/my/my'
				})
			},
			goshopcar(){
				uni.navigateTo({
					url:'/pages/shopcar/shopcar'
				})
			},
			gofood(){
				uni.navigateTo({
					url:'/pages/cake/cake'
				})
			},
			showtime() {
				let nowtime = new Date(), //获取当前时间
					endtime = new Date("2022/6/29"); //定义结束时间
			
				let lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60); //计算秒数
			
				this.countdown = leftd + "天" + lefth + ":" + leftm + ":" + lefts; //返回倒计时的字符串
			
				this.day = leftd; //返回天 
				this.time = lefth; //返回时
				this.minute = leftm; //返回分
				this.second = lefts; //返回秒
			
				// console.log(this.time)
			},
			
		},
		onLoad() {
			// console.log(this.$store.state.cart.cartList.length);
			// uni.request({
			// 	url:"https://dvpmajh0.lc-cn-n1-shared.com/1.1/classes/classify",
			// 	method:"GET",
			// 	header:{
			// 		"X-LC-Id":"dvPMajh0JgK2uTwKqIeUfUCA-gzGzoHsz",
			// 		"X-LC-Key":"6s3yDahrdtSxVviq7s2HnGFP",
			// 		"Content-Type":"application/json"
			// 	},
			// 	success: (res) => {
			// 		console.log(res);
			// 	}
			// })
			// $http('1.1/classes/classify').then(res=>{
			// 	console.log(res)
			// })
			// this.$get('1.1/classes/classify').then(res=>console.log(res))
			
			
			this.timer = setInterval(() => {
				this.showtime()
			}, 1000)
			
			this.$get('/1.1/classes/goods?limit=8').then(res=>{
				console.log(res)
				this.goodlist = res.results
			})
			
			this.$get('/1.1/classes/banner').then(res=>{
				// console.log(res)
				this.banner = res.results
				console.log(this.banner)
			})
		},

	}
</script>

<style lang="scss" scoped>
	
	swiper {
		width: 100%;
		height: 1000upx;

		swiper-item {
			image {
				width: 100%;
				height: 1000upx; 
			}
		}
	}

.wrap {
		height: 1000px;
	}


	.scrollview {
		white-space: nowrap;

		image {
			height: 290upx;
		}
	}

	.back-top {
		width: 60upx;
		height: 60upx;
		background-color: white;
		box-shadow: 0 0 10upx 3upx rgba($color: #000000, $alpha: 1.0);
		border-radius: 50%;
		position: fixed;
		bottom: 180upx;
		right: 30upx;
		text-align: center;
		line-height: 60upx;
		z-index:20;
		// opacity:0;
	}

	.scrollbody {
		height: 100vh; //不设置这个高度，那么滚动也触发不了@scroll
		// border: 1px solid red;
	}
		
	.fadein{
	
		animation: fadein 2s;
		
		
	}
	.fadeout{
		
		animation: fadeout 1.5s forwards;


	}
	@keyframes fadein{
		0%{
			opacity:0;
		}
		100%{
			opacity:100;
			visibility:visible ;
		}
	}
	
	@keyframes fadeout{
		0%{
			opacity:100;
		}
		100%{
			opacity:0;
			visibility: hidden;
		}
	}
	
</style>
